<style lang="less">
    /*@import '../../../styles/loading.less';*/
</style>
<style scoped>
    .pro-detail-content {
        padding-left: 20px;
        padding-right: 20px;
        margin-bottom: 50px;
    }



    #submit {
        border-radius: 20px;
        width: 200px;
    }

    #back {
        border-radius: 20px;
        margin-left: 20px;
        width: 120px;
    }

    .pro-detail-content .bgk {
        background-color: #EDF2F6;
        padding-top: 20px;
        margin-bottom: 20px;
        padding-left: 20px;

    }


    .common-box-body {
        padding-top: 24px;
    }

    .searchH3 {
        border-bottom: 1px solid #B3CAD7;
    }

    .common-box-header .lookPdf {
        font-weight: normal;
        text-decoration: underline !important;
    }

    .proTable {
        width: 100%;
        font-size: 16px;
        border-collapse: collapse;
        border: 1px solid #DCDCDC;
    }

    /* .proTable tr td{
        
    } */

    .proTable .head {
        height: 40px;
        line-height: 40px;
        font-weight: 500;
        border: 1px solid #DCDCDC;
        border-left: 0;
        border-top: 0;
        text-align: center;
        background-color: #F4F4F4;
    }

    .proTable .cont {
        height: 40px;
        line-height: 40px;
        border: 1px solid #DCDCDC;
        border-left: 0;
        border-top: 0;
        font-weight: 500;
        padding-left: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .proTable tr td.cont span.tese {
        width: 25% !important;
        display: inline-block !important;
        overflow: hidden !important;
    }

    .proTable .yesBorder {
        border-right: 0px;
    }
</style>
<style>
    .pro-detail-content .ivu-tabs.ivu-tabs-card>.ivu-tabs-bar .ivu-tabs-tab {
        color: #2d8cf0;
        border-color: transparent;
        background-color: #FFF;
    }

    .pro-detail-content .ivu-tabs.ivu-tabs-card>.ivu-tabs-bar .ivu-tabs-tab-active {
        color: #808080;
        border: 1px solid #dddee1;
        border-bottom: 0;
    }
</style>

<template>
    <div class="pro-detail">
        <product-title></product-title>
        <div class="pro-detail-content ">
            <Form>
                <div class="common-box-header">
                    <h3>产品基本信息</h3>
                </div>
                <Row class="proTable mt20 mb20">
                    <i-col class="head" span="2">
                        供应商
                    </i-col>
                    <i-col class="cont" span="4">
                        {{form.company}}
                    </i-col>
                    <i-col class="head" span="2">产品名称</i-col>
                    <i-col class="cont" span="4">{{form.name}}</i-col>
                    <i-col class="head" span="2">计划名称</i-col>
                    <i-col class="cont" span="4">{{form.plan_name}}</i-col>
                    <i-col class="head" span="2">产品代码</i-col>
                    <i-col class="cont yesBorder" span="4">{{form.pro_no}}</i-col>

                    <i-col class="head" span="2">产品状态</i-col>
                    <i-col class="cont" span="4">{{form.status==1?'上架':'下架'}}</i-col>
                    <i-col class="head" span="2">产品分类</i-col>
                    <i-col class="cont" span="4">{{form.cate_one_name}}{{form.cate_one_name?'-':''}}{{form.cate_two_name}}</i-col>
                    <i-col class="head" span="2">主附险分类</i-col>
                    <i-col class="cont" span="4">{{form.is_main==1?'主险':form.is_main==2?'附加险':form.is_main==3?'组合险':''}}</i-col>
                    <i-col class="head" span="2">承保年龄</i-col>
                    <i-col class="cont yesBorder" span="4">{{form.limit_age}}</i-col>

                    <i-col class="head" span="2">交费期间</i-col>
                    <i-col class="cont" span="10">
                        <span v-for="(item,index) in form.pay_period">{{item}}&nbsp;&nbsp;
                            <span v-if="index<form.pay_period.length-1">/</span>
                        </span>
                    </i-col>
                    <i-col class="head" span="2">保险期间</i-col>
                    <i-col class="cont yesBorder" span="10">
                        <!-- <span v-if="form.insurance_period"></span> -->
                        {{form.insurance_period}}
                        <!-- <span v-for="(item,index) in form.insurance_period.split('，')" v-else>{{item}}&nbsp;&nbsp;<span v-if="index<form.insurance_period.length-1">/</span></span> -->
                    </i-col>

                    <i-col class="head" span="2">必选附加险</i-col>
                    <i-col class="cont" span="10">
                        <span v-for="(item,index) in form.additional">{{item.name}}&nbsp;&nbsp;
                            <span v-if="index<form.additional.length-1">/</span>
                        </span>
                    </i-col>
                    <i-col class="head" span="2">交费方式</i-col>
                    <i-col class="cont yesBorder" span="10">
                        <span v-for="(item,index) in form.pay_type">{{item}}&nbsp;&nbsp;
                            <span v-if="index<form.pay_type.length-1">/</span>
                        </span>
                    </i-col>


                    <i-col class="head" span="2" style="border-bottom:0px;">推荐附加险</i-col>
                    <i-col class="cont yesBorder" span="22" style="border-bottom:0px;">
                        <a v-for="(item,index) in form.additional_recommend">{{item.name}}&nbsp;&nbsp;
                            <span v-if="index<form.additional_recommend.length-1">/</span>
                        </a>
                    </i-col>
                </Row>
                <div class="common-box-header" style="">
                    <h3>
                        APP相关信息
                    </h3>
                </div>
                <Row class="proTable mt20 mb20">
                    <i-col class="head" span="2">热门</i-col>
                    <i-col class="cont" span="4">
                        {{form.is_hot==1?'是':'否'}}
                    </i-col>
                    <i-col class="head" span="2">电投</i-col>
                    <i-col class="cont " span="4">
                        {{form.is_net==1?'是':'否'}}
                    </i-col>
                    <i-col class="head" span="2">推荐</i-col>
                    <i-col class="cont" span="4">
                        {{form.is_rec==1?'是':'否'}}
                    </i-col>
                    <i-col class="head" span="2">最新</i-col>
                    <i-col class="cont yesBorder" span="4">
                        {{form.is_new==1?'是':'否'}}
                    </i-col>


                    <i-col class="head" span="2">标签</i-col>
                    <i-col class="cont yesBorder" span="22">
                        <span v-for="(item,index) in form.label">{{item}} &nbsp;&nbsp;
                            <span v-if="index<form.label.length-1">/</span>
                        </span>
                    </i-col>

                    <i-col class="head" span="2">特色</i-col>
                    <i-col class="cont yesBorder" span="22">
                        <div v-for="(item,index) in form.special" class="tese">{{item.key}}—{{item.val}}&nbsp;&nbsp;
                            <span v-if="index<form.special.length-1">/</span>
                        </div>
                    </i-col>


                    <i-col class="head" span="2" style="border-bottom:0px;">条件</i-col>
                    <i-col class="cont yesBorder " span="22" style="border-bottom:0px;">
                        <span v-for="(item,index) in form.condition">{{item.key}}—{{item.val}}&nbsp;&nbsp;
                            <span v-if="index<form.condition.length-1">/</span>
                        </span>
                    </i-col>
                </Row>
                <div class="common-box-header" style="">
                    <h3>
                        条款资料信息&emsp;&emsp;
                        <a class="lookPdf" :href="form.pdf_path" target='_blank'>查看原PDF条款</a>
                    </h3>
                </div>
                <div class="mt20">
                    <Tabs type="card" :animated="false">
                        <TabPane label="保险责任">
                            <div v-html="form.rights">

                            </div>

                        </TabPane>
                        <TabPane label="投保该规则">
                            <div v-html="form.rule">
                            </div>
                        </TabPane>
                        <TabPane label="责任免除">
                            <div v-html="form.exclusion">
                            </div>
                        </TabPane>
                        <TabPane label="案例说明">
                            <div v-html="form.cases">
                            </div>
                        </TabPane>
                        <TabPane label="详细条款">
                            <div v-html="form.clause">
                            </div>
                        </TabPane>
                        <TabPane label="病种详情">
                            <div v-html="form.illness">
                            </div>
                        </TabPane>
                    </Tabs>
                </div>
            </Form>
            <div id="footer" class="pt22">
                <!-- <Button type="primary" shape="circle" id="submit" @click="update" style="border-radius: 30px !important;">
                立即编辑
            </Button> -->
                <Button id="back" shape="circle" @click="back" style="border-radius: 30px !important;">返回</Button>
            </div>
        </div>
    </div>
</template>
<script>
    import productTitle from '../../components/productTitle';
    import {
        _pro_third_info2,
        get_detail2,
        _update2
    } from '../../api/pro_show'
    export default {
        data() {
            return {
                form: {}
            }
        },
        components: {
            productTitle,

        },
        created() {},
        activated() {
            this.get_info();

        },
        methods: {
            get_info() {
                let params = {
                    mid: this.$route.params.id
                }
                new Promise((resolve, rejecct) => {
                    get_detail2(params).then(res => {
                        if (res.data.err == 0) {
                            this.form = res.data.data;
                            if (res.data.data.limit_age && res.data.data.limit_age.indexOf(',') > 0) {
                                let arr = res.data.data.limit_age.split(',');
                                this.form.limit_age = arr[0] + '-' + arr[1] + '周岁';
                            } else if (res.data.data.limit_age && res.data.data.limit_age.indexOf('，') >
                                0) {
                                let arr = res.data.data.limit_age.split('，');
                                this.form.limit_age = arr[0] + '-' + arr[1] + '周岁';
                            } else if (res.data.data.limit_age && res.data.data.limit_age.indexOf(',') ==
                                -1) {
                                this.form.limit_age = res.data.data.limit_age;
                            } else if (res.data.data.limit_age && res.data.data.limit_age.indexOf('，') ==
                                -1) {
                                this.form.limit_age = res.data.data.limit_age;
                            }
                            if (res.data.data.insurance_period && res.data.data.insurance_period.indexOf(
                                    ',') > 0) {
                                let arr = res.data.data.insurance_period.split(',');
                                let str = "";
                                arr.map(item => {
                                    str += item + ' /';
                                })
                                this.$nextTick(() => {
                                    this.form.insurance_period = str;
                                })
                            } else if (res.data.data.insurance_period && res.data.data.insurance_period
                                .indexOf('，') > 0) {
                                let arr = res.data.data.insurance_period.split('，');
                                let str = "";
                                arr.map(item => {
                                    str += item + ' /';
                                })
                                this.$nextTick(() => {
                                    this.form.insurance_period = str;
                                })
                            } else if (res.data.data.insurance_period && res.data.data.insurance_period
                                .indexOf(',') == -1) {
                                this.form.insurance_period = res.data.data.insurance_period;
                            } else if (res.data.data.insurance_period && res.data.data.insurance_period
                                .indexOf('，') == -1) {
                                this.form.insurance_period = res.data.data.insurance_period;
                            }
                        } else {
                            this.$Message.error(res.data.info);
                        }
                        resolve();
                    }).catch(error => {
                        rejecct(error);
                    });
                });
            },
            back() {
                this.$router.push({
                    name: 'pro'
                })
            },
            update() {
                this.$router.push({
                    name: 'pro_update',
                    params: {
                        id: this.$route.params.id
                    }
                })
            }
        }
    }
</script>